<template>
  <div class="icon-wrapper">
    <ul class="icon-list">
      <li class="item"
          @click="handleSkipAll(item,index)"
          v-for="(item, index) of iconList"
          :key="item.id">
        <div class="item-icon">
          <img :src="item.cate_icon"
               alt="">
        </div>
        <p class="desc">{{item.cate_title}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'HomeIcon',
  props: {
    iconList: {
      type: Array
    }
  },
  methods: {
    handleSkipAll (item, index) {
      if (index === this.iconList.length - 1) {
        this.$router.push({
          path: `/classify/${item.pid}`,
          query: {
            title: item.cate_title
          }
        })
      } else {
        this.getSearch(item.cate_title, item.id)
        this.$router.push({
          path: `/result`,
          query: {
            name: item.cate_title,
            sort: 'sort'
          }
        })
      }
    },
    ...mapMutations({
      changeSearchResult: 'changeSearchResult',
      changeSearchParams: 'changeSearchParams'
    }),
    getSearch (value, id) {
      let locationData = JSON.parse(this.$localStorage.get('locationData'))
      if (locationData != null) {
        locationData = Object.assign({}, locationData, { cate_id: id, shop_name: value, order: 'sort' })
        this.$api.search.getSearchResult({ ...locationData })
          .then(this.getSearchSucc)
          .catch((e) => {
            console.log(e)
          })
      }
      const searchParams = { name: value, sort: 'sort', id: id }
      this.changeSearchParams(searchParams)
    },
    getSearchSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        const data = res.data
        this.changeSearchResult(data)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.icon-wrapper
  aspectratio(51.94444%)

  .icon-list
    padding-top 32px
    padding-left 27px
    padding-right 27px
    padding-bottom 28px
    box-sizing border-box
    display flex
    flex-wrap wrap

    .item
      width 95px
      margin-right 55px
      margin-bottom 20px

      &:nth-of-type(5n)
        margin-right 0

      .item-icon
        width 100%
        height 95px
        border-radius 40px
        margin-bottom 20px

      .desc
        line-height 30px
        font-size $smallFz
        color $graySixth
        text-align center
        ellipsis()
</style>
